<%--
  Created by IntelliJ IDEA.
  User: 金贤哲
  Date: 2017/6/28 0028
  Time: 15:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>二维码页面显示</title>
    <meta name="decorator" content="default"/>
    <script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="${ctxStatic}/js/widget/stickytableheaders/js/jquery.stickytableheaders.min.js"></script>
    <script src="${ctxStatic}/layui/layui.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/html2canvas.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/crypto-js.js"></script>
    <style>
        .qrcode{
            width: 305px;
            height: 305px;
            margin-left: 80px;
            margin-top: 50px;
        }
        .qr{
            width: 300px;
            height: 300px;
            background-color: white;
        }
        .logo{
            width: 100px;
            position: absolute;
            top: 150px;
            left: 175px;
        }
    </style>
    <script>
        getImageBase64('${QRurl}');
        $(function() {
            html2canvas($("#qrcode"), {
                onrendered: function(canvas) {
                    var qr =convertImgToBase64($(".qr").src, function(base64Img){
                        console.log(base64Img);
                    });
                     //   base64encode($(".qr").src);
                    console.log(qr);
                    var html_canvas = canvas.toDataURL();
                    $('#down_button').attr('href', canvas.toDataURL());
                    $('#down_button').attr('download', 'myjobdeer.jpg');
                    $('#down_button').css('display','inline-block');

                    $.post('', {
                        order_id: 1,
                        type_id: 2,
                        html_canvas: html_canvas
                    }, function(json) {}, 'json')
                }
            });
        });
        function convertImgToBase64(url, callback, outputFormat){
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                canvas = null;
            };
            img.src = url;
        }
        function base64encode(str) {
            var _str = CryptoJS.enc.Utf8.parse(str);
            var _base64 = CryptoJS.enc.Base64.stringify(_str);
//            console.log(_base64);
            return _base64;
        }
        function getImageBase64(url) {

            var img = document.createElement('img');
            img.src =url;
            img.onload =function() {
               return  getBase64Image(img);
            }
        }
        function getBase64Image(img) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width, img.height);

            var dataURL = canvas.toDataURL("image/jpg");
            alert(dataURL);
            return dataURL

            // return dataURL.replace("data:image/png;base64,", "");
        }
    </script>
</head>
<body>
        <div class="qrcode" id="qrcode">
             <div class="qr"><img id="initImg" src="${QRurl}" ></div>
             <div class="logo"><img src="${ctxStatic}/images/logo.png" width="100px"></div>
        </div>
        <%--<a id="down_button">下载</a>--%>
</body>
</html>
